<template>
  <div>
    <a-button type="primary" @click="addVisible = true">添加成长档案</a-button>
    <div class="search">
      <a-spin :spinning="loading">
        <a-radio-group :value="size" @change="handleSizeChange" buttonStyle="solid">
          <a-radio-button :value="0">全部</a-radio-button>
          <a-radio-button :value="-1">课后点评</a-radio-button>
          <a-radio-button
            v-for="(item,index) in  buttonGroup"
            :key="index"
            :value="item.id"
          >{{item.name}}</a-radio-button>
          <!-- :disabled="item.is_enable==2" -->
        </a-radio-group>
        <div class="list">
          <div class="list_content" v-for="(item,index) in list" :key="index">
            <div class="content_name">
              <a-tag>{{item.growth}}</a-tag>
              <span class="name"></span>
            </div>
            <div class="create_time">{{item.created_at|formatDate}}</div>
            <div class="stars" v-if="item.growth=='课后点评'||item.type==2">
              <div v-for="(j,k) in item.data.teacher_evaluate_score" :key="k">
                <span v-if="j.name">{{j.name}}：</span>
                <a-rate v-model="j.score" disabled />
              </div>
              <div
                class="class_after"
                v-for="(i,j) in item.data.comment"
                :key="j"
                v-if="i.type=='text'"
              >
                <span v-if="i.type=='text'">{{i.content}}</span>
              </div>
              <div class="imgs" v-for="(i,j) in item.data.comment" :key="j" v-if="i.type!=='text'">
                <img
                  :src="i.content"
                  :alt="i.explain"
                  v-if="i.type=='picture'"
                  @click="showImg(item.data.comment,j)"
                />
                <video
                  :src="i.content"
                  v-if="i.type=='video'"
                  controls="controls"
                >您的浏览器不支持 video 标签。</video>
              </div>
            </div>

            <div class="content_text" v-if="item.data.content">{{item.data.content.text}}</div>
            <div class="content_img" v-if="item.data.content">
              <div
                class="imgs"
                v-for="(i,j) in item.data.content.arr"
                :key="j"
                @click="changeImgList(item.data.content.arr,j)"
              >
                <img :src="i.img" :alt="i.explain" v-if="i.img" />
                <video :src="i.mp4" v-if="i.mp4" controls="controls">您的浏览器不支持 video 标签。</video>
              </div>
            </div>
            <!-- <div class="content_img" v-if="item.growth=='课后点评'||item.type==2">
              <div class="imgs" v-for="(i,j) in item.data.comment" :key="j">
                <img :src="i.content" :alt="i.explain" v-if="i.type=='picture'" />
                <video
                  :src="i.content"
                  v-if="i.type=='video'"
                  controls="controls"
                >您的浏览器不支持 video 标签。</video>
                <audio
                  :src="i.content"
                  v-if="i.type=='voice'"
                  controls="controls"
                >您的浏览器不支持 audio 标签。</audio>
                <span v-if="i.type=='text'">{{i.content}}</span>
              </div>
            </div>-->

            <div class="lookMore" style="margin-top:10px">
              <a @click="lookInfo(item.id)" v-if="item.growth!=='课后点评'&&item.type!==2">查看详情</a>
            </div>
            <div class="icons">
              <img src="~@/assets/follow.png" alt />
            </div>
          </div>
        </div>
      </a-spin>
    </div>
    <a-modal :visible="imgVisible" :footer="null" @cancel="imgVisible = false">
      <a-carousel arrows>
        <div
          slot="prevArrow"
          slot-scope="props"
          class="custom-slick-arrow"
          style="left: 10px;z-index: 1"
        >
          <a-icon type="left-circle" />
        </div>
        <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
          <a-icon type="right-circle" />
        </div>
        <div v-for="(item,index) in previewImg" :key="index" class="modalImg">
          <img :src="item.img" :alt="item.explain" />
        </div>
      </a-carousel>
    </a-modal>
    <a-modal
      :visible="addVisible"
      title="新增成长档案"
      @cancel="addVisible = false"
      @ok="createGrowth"
      :confirmLoading="btnLoading"
    >
      <a-form-model
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        ref="ruleForm"
        :rules="rules"
      >
        <a-form-model-item label="接收人">{{studentName}}</a-form-model-item>
        <a-form-model-item label="档案类型" prop="growth_archive_sorts_id">
          <a-select v-model="form.growth_archive_sorts_id" placeholder="请选择档案类型">
            <a-select-option
              v-for="(item,index) in buttonGroup"
              :key="index"
              :value="item.id"
              :disabled="item.is_enable==2"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="推送给学员">
          <a-switch @change="onChange" />
        </a-form-model-item>
        <a-form-model-item label="内容" prop="text">
          <a-textarea
            v-model="form.text"
            placeholder="请输入档案内容"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
        <a-form-model-item label=" " :colon="false">
          <div>
            <upload-mp4 @url="getUrl" @btnStartLoading="btnStart"></upload-mp4>
          </div>
          <div class="img_mp4_list" v-for="(item,index) in form.content.arr" :key="index">
            <div class="file_">
              <img :src="item.img" alt v-if="item.img" />
              <video
                id="hideAction"
                :src="item.mp4"
                controls="controls"
                v-if="item.mp4"
              >您的浏览器不支持 video 标签。</video>
              <div
                style="width:60px;height:60px;position:absolute;top:15px;left:15px;z-index:111;"
                v-if="item.mp4"
              >
                <a-icon type="youtube" style="color:white;font-size:30px;" />
              </div>
            </div>
            <div class="file_explain">
              <a-textarea
                v-model="item.explain"
                placeholder="100字说明"
                :auto-size="{ minRows: 2.5, maxRows: 5 }"
              />
            </div>
            <div>
              <a-icon
                type="minus-circle"
                @click="delThis(index)"
                style="cursor: pointer;margin-left:10px;font-size:24px;"
              />
            </div>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <preview-image ref="preview"></preview-image>
    <a-modal
      :visible="infoVisible"
      @cancel="infoVisible=false"
      :footer="null"
      title="成长档案详情"
      width="80%"
    >
      <div class="growthInfo">
        <div class="infomation">
          <div class="title">{{growthInfo.growth}}</div>
          <div class="className">
            <img
              src="~@/assets/student_tags_growth.png"
              style="margin-right:5px;position:relative;top:-4px;"
              height="18px;"
              alt
            />
            <span v-for="(j,k) in growthInfo.student_or_shcool" :key="k">
              <span v-if="k<2">{{j}}</span>
            </span>
            等
            <span
              style="color:#1890ff;margin:0 5px;"
            >{{growthInfo.student_or_shcool.length}}</span>个
          </div>
          <div class="studentName_createTime">
            <a-icon type="user" style="color:#ccc;margin-right:5px;" />
            {{growthInfo.user_name}}
            <a-icon type="history" style="color:#ccc;margin-right:5px;margin-left:20px;" />
            {{growthInfo.created_at|formatDate}}
          </div>
          <div class="content">
            <div class="text">{{growthInfo.content.text}}</div>
            <div
              class="content_img_mp4"
              v-for="(item,index) in growthInfo.content.arr"
              :key="index"
            >
              <div class="imgs">
                <img :src="item.img" :alt="item.explain" v-if="item.img" />
                <video :src="item.mp4" v-if="item.mp4" :alt="item.explain" controls>你的浏览器暂不支持vedio标签</video>
                <p>{{item.explain}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="comments">
          <div class="title">互动评论</div>
          <div class="comments_area">
            <div class="user_comments" v-for="(item,index) in growthInfo.interaction" :key="index">
              <div class="comments_content">
                <div class="headImg">
                  <img
                    :src="item.from.avatar.url||item.from.avatar"
                    v-if="item.from.avatar"
                    style="border-radius:50%;"
                  />
                  <img src="~@/assets/touxiang.svg" v-else style="border-radius:50%;" />
                </div>
                <div class="userInfo">
                  <div class="name">{{item.from.name}}</div>
                  <div class="time">
                    {{item.created_at}}
                    <span
                      class="action"
                      v-if="item.is_mine!==1"
                      @click="replyComment(item.from.id,item.from.user_type,item.from.name)"
                    >回复</span>
                    <span class="action" v-else @click="delComments(item.id,index)">删除</span>
                  </div>
                  <div class="text">
                    <span v-if="item.to.name">
                      回复
                      <span class="to_name" style="color:#ccc">{{item.to.name}}：</span>
                    </span>
                    {{item.comment}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="comments_">
            <a-input
              type="textarea"
              :maxLength="200"
              :placeholder="reply.to_id?'回复'+reply.name+'(200字内)':'添加评论(200字内)'"
              :autoSize="{maxRows:2,minRows:2}"
              v-model="reply.comment"
            ></a-input>
            <a-button
              type="primary"
              style="margin-top:10px;margin-right:10px;"
              @click="addComment()"
            >发送</a-button>
            <a-button @click="cancelReply" v-if="reply.to_id">取消</a-button>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { growthTypeList, growthList, addGrowth, getGrowth, delCommont, addComment } from '@/api/growth'
import uploadMp4 from '@/components/uploadIMG_AVI'
import previewImage from '@/components/previewImg'
export default {
  name: 'footPrint',
  props: ['studentId', 'studentName'],
  components: { uploadMp4,previewImage },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      btnLoading: false,
      loading: false,
      size: 0,
      buttonGroup: [],
      list: [],
      previewImg: [],
      imgVisible: false,
      addVisible: false,
      infoVisible: false,
      form: {
        is_show: 2,
        growth_archive_sorts_id: null,
        project_type: 1,
        content: {
          text: '',
          arr: []
        },
        text: ''
      },
      growthInfo: {
        content: {
          arr: [],
          text: ''
        },
        student_or_shcool: []
      },
      rules: {
        growth_archive_sorts_id: [{ required: true, message: '请选择档案类型', trigger: 'change' }],
        text: [{ required: true, message: '请输入档案内容', trigger: 'change' }]
      },
      reply: {
        to_id: null,
        to_type: null,
        name: '',
        comment: '',
        project_id: null,
        project_type: 1,
        school_id: this.$store.state.user.school_id
      },
      growthId: null
    }
  },
  created() {
    this.loading = true
    growthTypeList({
      school_id: this.$store.state.user.school,
      pageSize: 999999
    }).then(res => {
      this.buttonGroup = res.data
    })
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      growthList({
        student_id: Number(this.studentId),
        type: this.size,
        school_id: this.$store.state.user.school_id
      })
        .then(res => {
          this.list = res
        })
        .catch(err => {
          this.$message.error(err.data.message || '获取成长档案列表失败，请稍后重试~')
        })
        .finally(() => {
          this.loading = false
        })
    },
    showImg(data, index) {
      this.$refs.preview.showImg(data, index)
    },
    handleSizeChange(e) {
      this.size = e.target.value
      this.getList()
    },
    //查看详情
    lookInfo(e) {
      this.growthId = e
      getGrowth(
        {
          student_id: this.studentId,
          school_id: this.$store.state.user.school_id
        },
        e
      )
        .then(res => {
          let params = JSON.parse(JSON.stringify(res))
          this.growthInfo = params
          this.infoVisible = true
        })
        .catch(err => {
          this.$message.error(err.data.message || '获取详情失败，请刷新后重试')
        })
    },
    // 图片预览
    changeImgList(data, index) {
      let params = data.slice(index, data.length)
      //   this.previewImg = data
      //   if (this.previewImg.length > 0) {
      //     this.imgVisible = true
      //   }
    },
    onChange(data) {
      if ((data = false)) {
        this.is_show == 2
      } else {
        this.is_show == 1
      }
    },
    createGrowth() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.btnLoading = true
          let params = JSON.parse(JSON.stringify(this.form))
          params.project_ids = [Number(this.studentId)]
          params.school_id = this.$store.state.user.school
          params.content.text = params.text
          params.content = JSON.stringify(params.content)
          addGrowth(params)
            .then(res => {
              this.$message.success('创建成功')
              this.btnLoading = false
              this.addVisible = false
              this.getList()
            })
            .catch(err => {
              this.$message.error(err.data.message || '创建失败')
              this.btnLoading = false
            })
        } else {
          return false
        }
      })
    },
    getUrl(e, type) {
      let arr = ['video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov', 'video/mp4']
      if (arr.indexOf(type) !== -1) {
        this.form.content.arr.push({
          mp4: e,
          explain: ''
        })
        this.btnLoading = false
      } else {
        this.form.content.arr.push({
          img: e,
          explain: ''
        })
        this.btnLoading = false
      }
    },
    btnStart(e) {
      this.btnLoading = e
    },
    delThis(e) {
      this.form.content.arr.splice(e, 1)
    },
    delComments(e, data) {
      delCommont(e)
        .then(res => {
          this.lookInfo(this.growthId)
          this.$message.success('删除成功')
        })
        .catch(err => {
          this.$message.success('删除失败~')
        })
    },
    replyComment(data, type, name) {
      this.reply.to_type = type
      this.reply.to_id = data
      this.reply.name = name
    },
    cancelReply() {
      this.reply.to_type = null
      this.reply.to_id = null
      this.reply.name = null
    },
    addComment() {
      let params = JSON.parse(JSON.stringify(this.reply))
      params.project_id = this.growthInfo.project_id
      params.school_id = this.$store.state.user.school
      addComment(params)
        .then(res => {
          this.lookInfo(this.growthId)
          this.reply.comment = ''
          this.$message.success('回复/评论成功')
        })
        .catch(err => {
          this.$message.error(err.data.message || '回复/评论失败')
        })
    }
  },
  watch: {
    addVisible(val) {
      if (val == false) {
        this.form = {
          is_show: 2,
          growth_archive_sorts_id: null,
          project_type: 1,
          content: {
            text: '',
            arr: []
          },
          text: ''
        }
      }
    },
    infoVisible(val) {
      if (val == false) {
        this.growthId = null
        this.reply = {
          to_id: null,
          to_type: null,
          name: '',
          comment: '',
          project_id: null,
          project_type: 1
        }
      }
    }
  }
}
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  overflow: hidden;
  min-height: 160px;
}
.modalImg {
  text-align: center;
}
.swiperPoint > li.slick-active > button {
  color: #000 !important;
}
.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  border-radius: 10px;
  color: #000;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
</style>
<style lang="less" scoped>
.growthInfo {
  display: flex;
  .infomation {
    width: 60%;
    height: 458px;
    border-right: 1px solid #e8e8e8;
    overflow-y: auto;
    div {
      margin-top: 10px;
    }
    .title {
      margin-top: 0;
      margin-bottom: 10px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
      font-size: 25px;
    }
    .className {
      color: #565656;
    }
    .content {
      padding: 0 5px;

      .content_img_mp4 {
        display: flex;
        margin: 15px 0;
        .imgs {
          margin-right: 20px;
          width: 50%;
          max-height: 420px;
          overflow: hidden;
          img  {
            width: 100%;
            height: auto;
            max-height: 390px;
          }
          video  {
            width: 100%;
            height: auto;
            max-height: 390px;
          }
        }
      }
    }
  }
  .comments {
    padding: 0 20px;
    width: 40%;
    height: 458px;
    overflow-y: auto;
    .title {
      font-size: 16px;
    }
    .comments_area {
      height: 300px;
      overflow-y: auto;
      margin-bottom: 20px;
      .user_comments {
        padding: 20px;
        .comments_content {
          display: flex;
          .headImg {
            width: 35px;
            height: 35px;
            img {
              width: 100%;
              height: auto;
              overflow: hidden;
            }
          }
          .userInfo {
            flex: 1;
            margin-left: 10px;
            position: relative;
            top: -5px;
            .time {
              font-size: 12px;
              color: #999;
              .action {
                font-size: 14px;
                color: #1890ff;
                margin-left: 5px;
                cursor: pointer;
              }
            }
            .text {
              margin-top: 10px;
              word-break: break-all;
            }
          }
        }
      }
    }
  }
}
.img_mp4_list {
  margin-top: 10px;
  display: flex;
  align-items: center;
  .file_ {
    width: 60px;
    height: 60px;
    position: relative;
    top: 0;
    left: 0;
    margin-right: 10px;
    video {
      width: 60px;
      height: 60px;
    }
    video::-webkit-media-controls {
      display: none !important;
    }
    img {
      width: 60px;
      height: 60px;
    }
  }
  .file_explain {
  }
}
.search {
  margin: 15px 0;
  //   button {
  //     margin-right: 10px;
  //   }
}
.list {
  margin-top: 30px;
  .list_content {
    margin-left: 50px;
    padding-left: 60px;
    border-left: 1px solid #e8e8e8;
    padding-bottom: 30px;
    position: relative;
    .stars {
      .class_after {
        margin: 10px 0;
      }
      .imgs {
        margin-right: 20px;
        width: 16%;
        height: 130px;
        overflow: hidden;
        img {
          width: 100%;
          height: auto;
          max-height: 130px;
          object-fit: cover;
        }
        video {
          width: 100%;
          height: auto;
          max-height: 130px;
          object-fit: cover;
        }
      }
    }
    .create_time {
      padding-top: 5px;
      font-size: 12px;
      color: rgb(151, 151, 151);
    }
    .content_text {
      margin: 5px 0 10px 0;
    }
    .content_img {
      display: flex;
      margin-bottom: 15px;
      .imgs {
        margin-right: 20px;
        width: 16%;
        height: 130px;
        overflow: hidden;
        img {
          width: 100%;
          height: auto;
          max-height: 130px;
          object-fit: cover;
        }
        video {
          width: 100%;
          height: auto;
          max-height: 130px;
          object-fit: cover;
        }
      }
    }
    .icons {
      position: absolute;
      left: -10.6px;
      top: -2px;
      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>